<!--
 * @Author: luojianfeng
 * @Date: 2023-01-31 09:41:19
 * @LastEditTime: 2023-03-22 10:52:05
 * @LastEditors: luojianfeng
 * @Description:
-->
<template>
  <div>{{ test }}</div>
  <base-table :columns="columns" :data="tableData" :pagination="true">
    <template #image="{ row }">
      <img :src="row.imageUrl" alt="" />
    </template>

    <template #action="{ row }">
      <el-button @click="edit(row)">Edit</el-button>
    </template>
  </base-table>
  <el-button @click="handle">sss</el-button>
</template>
<script setup lang="ts">
import baseTable from '~/components/baseTable/Index.vue'
let test = ref(0)
const handle = () => {
  ElMessage('this is a message.')
  testApi().then((e) => {
    console.log(e.data.name, '-')
  })
}
const columns = [
  { prop: 'name', label: 'Name' },
  { prop: 'age', label: 'Age' },
  { prop: 'address', label: 'Address' },
  { prop: 'image', label: 'Image', custom: true },
  { prop: 'action', label: 'Actions', custom: true }
]

// const tableData = [

// ]
let tableData = Array.from({ length: 100 }, (_, index) => {
  return {
    name: 'John Doe',
    age: 30 + index,
    address: '123 Main St.',
    imageUrl: 'https://via.placeholder.com/150'
  }
})
const edit = (row: any) => {
  console.log(11, row)
}
</script>
